<template>
  <div class="card-list">
    <PayCard
      v-for="card in list"
      :key="card.id"
      :type="card.type"
      :money="card.money"
    />
    <n-button
      dashed
      type="primary"
      class="w100"
      @click="handleAdd"
    >
      <template #icon>
        <n-icon :component="AddOutline" />
      </template>
      添加卡包
    </n-button>
  </div>
</template>

<script lang="ts" setup>
  import PayCard from '@/components/PayCard/PayCard.vue'
  import { AddOutline } from '@vicons/ionicons5'

  withDefaults(
    defineProps<{
      list?: any[]
    }>(),
    {
      list: () => [{ money: '123', type: '微信' }]
    }
  )

  const handleAdd = () => {
    console.log('添加卡包')
  }
</script>

<style scoped lang="scss">
  .card-list {
    height: 100%;
    width: 260px;
    margin-right: $space-lg;
    @extend .box;
  }
</style>
